<template>
  <div class="signin">
    <el-form-item label="日签奖励" prop="rules.everyday">
      <span class="sa-m-r-12">每日签到固定积分</span>
      <el-input
        class="sa-w-120"
        v-positiveinteger
        v-model="activityDetail.model.rules.everyday"
        type="number"
      >
        <template #append>积分</template>
      </el-input>
    </el-form-item>
    <el-form-item label="递增签到" prop="rules.is_inc" required>
      <el-switch
        v-model="activityDetail.model.rules.is_inc"
        active-value="1"
        inactive-value="0"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_inc == 0 ? '关闭' : '开启' }}
      </span>
    </el-form-item>
    <el-form-item v-if="activityDetail.model.rules.is_inc == 1" class="sa-m-b-0">
      <div class="el-form-item-wrap sa-flex sa-flex-wrap">
        <el-form-item
          class="el-form-item--label-left is-no-asterisk"
          label="次日起递增奖励"
          prop="rules.inc_num"
        >
          <el-input
            class="sa-w-120 sa-m-r-12"
            v-positiveinteger
            v-model="activityDetail.model.rules.inc_num"
            type="number"
          >
            <template #append>积分</template>
          </el-input>
        </el-form-item>
        <el-form-item
          class="el-form-item--label-left is-no-asterisk"
          label="自"
          prop="rules.until_day"
        >
          <el-input
            class="sa-w-120 sa-m-r-12"
            v-positiveinteger
            v-model="activityDetail.model.rules.until_day"
            type="number"
          >
            <template #append>天</template>
          </el-input>
          <span class="desc">后不再递增</span>
        </el-form-item>
      </div>
    </el-form-item>
    <el-form-item label="连续签到">
      <el-switch v-model="is_discounts" active-value="1" inactive-value="0"></el-switch>
      <span class="sa-m-l-8">
        {{ is_discounts == 0 ? '关闭' : '开启' }}
      </span>
    </el-form-item>
    <el-form-item v-if="is_discounts == 1">
      <div>
        <div class="el-form-item-wrap">
          <template v-for="(d, dindex) in activityDetail.model.rules.discounts" :key="d">
            <el-form-item
              class="is-required"
              :label="`条件${dindex + 1}`"
              label-width="fit-content"
            >
              <el-form-item
                class="el-form-item--label-left is-no-asterisk"
                label="连续签到"
                :prop="'rules.discounts.' + dindex + '.full'"
                :rules="activityDetail.rules.rules.discounts.full"
              >
                <el-input
                  class="sa-w-120 sa-m-r-12"
                  v-positiveinteger
                  v-model="d.full"
                  type="number"
                >
                  <template #append>天</template>
                </el-input>
              </el-form-item>
              <el-form-item
                class="el-form-item--label-left is-no-asterisk"
                label="赠送积分"
                :prop="'rules.discounts.' + dindex + '.value'"
                :rules="activityDetail.rules.rules.discounts.value"
              >
                <el-input
                  class="sa-w-120 sa-m-r-12"
                  v-positiveinteger
                  v-model="d.value"
                  type="number"
                >
                  <template #append>积分</template>
                </el-input>
                <el-button
                  v-if="dindex"
                  class="is-link"
                  type="danger"
                  size="small"
                  @click="onDeleteDiscounts"
                >
                  删除
                </el-button>
              </el-form-item>
            </el-form-item>
          </template>
        </div>
        <el-button
          v-if="activityDetail.model.rules.discounts.length < 3"
          class="is-link"
          type="primary"
          @click="onAddDiscounts"
        >
          + 添加连续签到天数
        </el-button>
      </div>
    </el-form-item>
    <el-form-item label="补签设置">
      <el-switch
        v-model="activityDetail.model.rules.is_replenish"
        active-value="1"
        inactive-value="0"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_replenish == 0 ? '关闭' : '开启' }}
      </span>
    </el-form-item>
    <el-form-item class="sa-m-b-0" v-if="activityDetail.model.rules.is_replenish == 1">
      <div class="el-form-item-wrap">
        <div class="sa-flex sa-flex-wrap">
          <el-form-item
            class="el-form-item--label-left"
            label="用户在"
            prop="rules.replenish_limit"
          >
            <el-input
              class="sa-w-120 sa-m-r-12"
              v-positiveinteger
              v-model="activityDetail.model.rules.replenish_limit"
              type="number"
            >
              <template #append>天</template>
            </el-input>
          </el-form-item>
          <el-form-item
            class="el-form-item--label-left is-no-asterisk"
            label="内可补签"
            prop="rules.replenish_days"
          >
            <el-input
              class="sa-w-120 sa-m-r-12"
              v-positiveinteger
              v-model="activityDetail.model.rules.replenish_days"
              type="number"
            >
              <template #append>天</template>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item
          class="el-form-item--label-left"
          label="每次补签消耗积分"
          prop="rules.replenish_num"
        >
          <el-input
            class="sa-w-120 sa-m-r-12"
            v-positiveinteger
            v-model="activityDetail.model.rules.replenish_num"
            type="number"
          >
            <template #append>积分</template>
          </el-input>
        </el-form-item>
      </div>
    </el-form-item>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue';

  const props = defineProps(['activityDetail', 'activityStatus']);

  const is_discounts = ref(props.activityDetail.model.rules.discounts.length > 0 ? '1' : '0');
  watch(
    () => props,
    () => {
      if (props.activityDetail.model.rules.discounts.length > 0) {
        is_discounts.value = '1';
      }
    },
    { deep: true },
  );

  function onAddDiscounts() {
    props.activityDetail.model.rules.discounts.push({
      full: '',
      value: '',
    });
  }

  function onDeleteDiscounts(index) {
    props.activityDetail.model.rules.discounts.splice(index, 1);
  }
</script>
